import datePicker from '../../utils/datePicker.js';
import Index from './index.hbs';
import './style.css';
import 'babel-polyfill';
var app = {
  data: {
    getcityListUrl: 'http://admin.mumway.com/index/activity/cityList',
    submitUrl: 'http://admin.mumway.com/index/activity/addServiceOffers',
    method: 'POST',
    unSeledColor: "#999",
    seledColor: "#000",
    etraScripts: ['http://lead.soperson.com/10042070/10104213.js'],
    aYiTypes: ['月嫂', '育儿嫂']
  },

  init(){
    this.insertHTML();//.calInit().setSelectColor().setCityList().onToggleAyiType().onSubmit();
  },

  async insertHTML(){
    var cityList = await this.getCityList();
    var div = document.createElement('div');
    div.id = 'app';
    div.innerHTML = Index({
      cityList,
      aYiTypes: this.data.aYiTypes
    });
    document.body.appendChild(div);
    this.mounted();
  },

  mounted(){
    this.calInit();
    this.setSelectColor();
    this.onToggleAyiType();
    this.onSubmit();
  },

  calInit(){
    this.calendar1 = new datePicker();
    this.calendar2 = new datePicker();
    this.calendar1.init({
      'trigger': '#datePicker1', /*按钮选择器，用于触发弹出插件*/
      'type': 'date',/*模式：date日期；datetime日期时间；time时间；ym年月；*/
      'minDate':'2016-1-1',/*最小日期*/
      'maxDate':'2022-12-31',/*最大日期*/
      'onSubmit':function(){/*确认时触发事件*/
        //var theSelectData=calendar.value;
      },
      'onClose':function(){/*取消时触发事件*/
      }
    });
    
    this.calendar2.init({
      'trigger': '#datePicker2',
      'type': 'date',
      'minDate':'2016-1-1',
      'maxDate':'2022-12-2'
    });
  },

  setSelectColor(){
    
    var self = this;
    $("select").css("color", self.data.unSeledColor);
    $("select").change(function() {
      var $this = $(this);
      var selVal = $this.val();
      if (selVal) { // 默认
        $this.css("color", self.data.seledColor);
      }else{
        $this.css("color", self.data.unSeledColor);
      }
    });
  },

  getCityList(){ //获得并设置城市列表
    return new Promise((resolve, reject) => {
      $.post(this.data.getcityListUrl, function(data){
        if (data.success) {
          resolve(data.data);
        }else{
          resolve();
        }
      });

    });
  },

  onToggleAyiType(){ // 设置阿姨类型的不同，日期也会改变
    var self = this;
    $(".ayi-select").change(function() {
      var $this = $(this);
      var curAyiType = $this.find('option:selected').val();
      var $dateInput = $this.parent().parent().find('.date-input');
      // console.log($this);
      if (curAyiType === '月嫂') {
        // console.log($dateInput);
        $dateInput.prop({placeholder: '您的预产期'});
        if($dateInput.val() && +$dateInput.val().slice(0, 4) < 2019){
          $dateInput.val('');
        }
        self.calendar1.minY = 2019;
        self.calendar2.minY = 2019;
      }else { // 育儿嫂
        $dateInput.prop({placeholder: '您的宝宝生日'});
        self.calendar1.minY = 2016;
        self.calendar2.minY = 2016;
      }
    });  
  },

  onSubmit(){ // 提交表单
    var submitBtn = $('.btn-submit');
    let self = this;
    submitBtn.click(function(){
      var $form = $(this).parent();
      var selPhone = $form.find('.phone-input').val();
      var selDate = $form.find('.date-input').val();
      var selCity = $form.find('.city-select option:selected').val();
      var selAyi = $form.find('.ayi-select option:selected').val().trim();
      var phoneReg=/^[1][3,4,5,7,8,9][0-9]{9}$/;
      //console.log(selPhone, selDate, selCity, selAyi);
      if(!selPhone || !selDate || !selCity || !selAyi) return alert('信息填写不完整！');
      if(!phoneReg.test(selPhone)) return alert('手机号格式不正确');
      var row = {
            work_type: selAyi,
            phone: selPhone,
            city: selCity,
            expected_date: selDate,
            source_url: window.location.href
          }
      $.ajax({
        url: self.data.submitUrl,
        type: self.data.method,
        dataType: 'json',
        data: {
          "row": row
        },
        success:function(msg){
          if(msg.success){
            alert('您已申请成功，我们会有专业的母婴顾问给您做详细的介绍，请注意接听电话，感谢您的信任！');
          }else{
            alert(msg.msg || '预约失败,请重试');
          }
        }
      });
    });
    return this;
  },

  loadExtraScript(){
    var etraScripts = this.etraScripts;
    for (var i = 0; i < etraScripts.length; i++) {
      var script = document.createElement('script');
      script.src = etraScripts[i];
      document.body.appendChild(script);
    }
    
  }

};
app.init();
